<template>
    <el-pagination
        background
        size="default"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 15, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
</template>

<script setup lang="ts">
    const props = defineProps({
        total: {
            type: Number,
            default: 0,
        },
        currentPage: {
            type: Number,
            default: 1,
        },
        pageSize: {
            type: Number,
            default: 15,
        },
    })
    const emit = defineEmits(['size-change', 'current-change']);
    const handleSizeChange = (e: number) => {
        emit('size-change', e);
    }
    const handleCurrentChange = (e: number) => {
        emit('current-change', e);
    }
</script>